<template>
  <div class="  container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center2 " style="height: auto; margin-bottom:  0px;">
        <div class="test-con">
          <div class="test-con-list">
            <h1>{{ testInfo.name }}</h1>
            <h4>
              <label>
                测试时间：
                <span v-if="testInfo.limitdata == '1'">{{ testInfo.limitall }}分钟</span>
                <span v-else>不限时</span>
              </label>
              <label>题量：{{ testInfo.question_count }}道</label>
              <label>分数：{{ testInfo.pointslimit }}分</label>
            </h4>
            <div class=" test-c-info">
              <div class="timu">
                <p class="m-act" v-for="(item, index) in testInfo.typedata">
                  <label class="fl  ">{{ item.typedata_text }}</label>
                  <label class=" fr ">{{ item.num }}道{{ item.sore }}分</label>
                </p>
              </div>
              <div class="arrow-r" @click="isLeft = true"></div>

              <div class="arr-area" v-if="isLeft == true">
                <ul>
                  <li v-for="(item, index) in testList" style="cursor: pointer;" :key="index" @click="getTestInfo(item.id)">
                    <span style="display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{ item.name }}</span>
                    <label class="red" v-if="item.topic_status == 0">未完成</label>
                    <label class="green" v-else>完成</label>
                  </li>
                </ul>
                <div class="arrow-ll" @click="isLeft = false"></div>
              </div>

              <div class="clear"></div>
              <div class="mt30 test-btn"><el-button @click="goNext(id)" v-if="testInfo.topic_status == 0">开始答题</el-button></div>
              <div class="mt30 test-btn"><el-button @click="goNext(id)" v-if="testInfo.topic_status == 1">重新答题</el-button></div>
              <div class="mt30 test-btn"><el-button @click="goJG(id)" v-if="testInfo.topic_status == 1">查看结果</el-button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header.vue';
import Copyright from '../../components/copyright2.vue';
export default {
  data() {
    return {
      isLeft: false,
      value: [],
      course_id: '',
      token: localStorage.getItem('token'),
      testList: [],
      testInfo: '',
      id: '',
      isTime: false,
      testid: ''
    };
  },
  created() {
    this.course_id = this.$route.query.course_id;
    this.testid = this.$route.query.testid;
    this.getTestLeft();
  },

  methods: {
    getTestLeft() {
      this.$api('getCourseList.getTopicList', { token: this.token, course_id: this.course_id }).then(res => {
        this.testList = res.data.data;
        this.id = res.data.data[0].id;
        //console.log();
        if (this.testid != undefined) {
          this.getTestInfo(this.testid);
        } else {
          this.getTestInfo(this.id);
        }
        // //console.log(this.testid==undefined)
      });
    },
    getTestInfo(id) {
      this.id = id;
      this.$api('getCourseList.getTopicInfo', { token: this.token, id: id }).then(res => {
        //console.log(res.data);
        this.testInfo = res.data[0];
      });
    },
    goNext(id) {
      this.$router.push('/test1?id=' + id);
    },
    goJG(id) {
      this.$router.push('/test2?id=' + this.id);
    },
    goCollect() {
      this.$router.push('/courseCollect');
    }
  },
  components: { Header, Copyright }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
</style>
